<template>
	<view class="tabBar-container">
		<scroll-view scroll-x="true" show-scrollbar="true" :scroll-into-view="getCurrIndexId" :scroll-with-animation="true" class="scroll-container">
			<view class="scroll-box">
				<view @click="hanleToNav(index)" :id="`item${index}`" :class="{active:activeIndex === index}" class="scroll-item" v-for="(item,index) in lableList" :key="index">	
																		{{item.name}}</view>
			</view>
		</scroll-view>
		<view class="setting-box">
			<uni-icons @click="handleSetting" type="gear" size="26" color="#666"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		name: "TaBar",
		props:{
			lableList:{
				type:Array,
			},
			activeIndex:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
			};
		},
		methods:{
			hanleToNav(index){
				this.$emit("changeActiveIndex",index)
			},
			handleSetting(){
				uni.navigateTo({
					url: "/pages/labelSetting/labelSetting"
				})
			}
		},
		computed:{
			getCurrIndexId(){
				return "item" + this.activeIndex
			}
		},
		created() {
		}
	}
</script>

<style lang="scss" scoped>
	@import "./scss/TabBar.scss";
</style>